<!--
 * @Author: wangming
 * @Date: 2022-04-22 16:51:10
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-11 09:51:27
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hlTableList/__components__/addRelationCode/template.vue
 * @Description: 
-->
<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2022-01-07 14:43:25
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="460px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>关联字段</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <el-form
      class="pl30 pr30"
      :model="FormData"
      ref="Form"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="关联字段" prop="chidlrenKey">
        <el-select
          v-model="FormData.chidlrenKey"
          placeholder="请选择"
          size="small"
          class="mb10"
          value-key="code"
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in modelList"
            :key="index"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="获取值" prop="keytype">
        <el-radio-group v-model="FormData.keytype">
          <el-radio label="formValue">表单值</el-radio>
          <el-radio label="routerValue">路由参数</el-radio>
          <el-radio label="dynamicValue">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="formkey"
        label="关联表单"
        key="formkey"
        v-if="FormData.keytype === 'formValue'"
      >
        <el-select
          placeholder="选择提交表单标识"
          v-model="FormData.formkey"
          clearable
          @change="changeForm"
          style="width: 200px"
        >
          <el-option
            :value="i.key"
            :label="i.label"
            v-for="(i, index) in getFormListInTree"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        key="formcode"
        label="数据字段"
        prop="formcode"
        v-if="FormData.keytype === 'formValue'"
      >
        <el-select
          v-model="FormData.formcode"
          placeholder="请选择"
          size="small"
          class="mb10"
          value-key="code"
          style="width: 200px"
        >
          <el-option
            v-for="(item, index) in fieldList"
            :key="index"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        key="routeValue"
        label="参数值"
        prop="routeValue"
        v-if="FormData.keytype === 'routerValue'"
      >
        <el-input
          style="width: 200px"
          v-model="FormData.routeValue"
          size="small"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        key="customFun"
        label="函数"
        prop="customFun"
        v-if="FormData.keytype === 'dynamicValue'"
      >
        <div class="ks-row-middle g6 poi codebg ks-col" @click="editJsx()">
          <div class="g9 f12 ks-col pl5 pr5">
            {{
              FormData.customFun
                ? "export default function..."
                : "（空）点击添加自定义函数"
            }}
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import monacoEditor from "../../monacoEditor/index.js";
import { getHmentitymodelList } from "@/apis/paas/HmEntityModelController.js";
import storeform from "@/store";
import { cloneDeep } from "lodash";
const template = `/**
 * context    页面工具类对象,
 * rootScope  页面公共事件对象
 * @returns
 */
function getQueryData(context,rootScope) {
  return ''
}`;
export default {
  computed: {
    getFormListInTree() {
      return storeform.getters.getFormListInTree;
    },
  },
  data() {
    return {
      rules: {
        chidlrenKey: [
          { required: true, message: "请选择子表字段", trigger: "change" },
        ],
        keytype: [
          { required: true, message: "请选择值类型", trigger: "change" },
        ],
        formkey: [
          { required: true, message: "请选择关联表单", trigger: "blur" },
        ],
        formcode: [
          { required: true, message: "请选择数据字段", trigger: "change" },
        ],
        routeValue: [
          { required: true, message: "请输入参数值", trigger: "blur" },
        ],
        customFun: [
          { required: true, message: "添加自定义函数", trigger: "blur" },
        ],
      },
      FormData: {
        chidlrenKey: "", //子表字段
        keytype: "", //类型
        formkey: "", //关联表
        formcode: "", //数据字段
        routeValue: "", //参数值
        customFun: "",
      },
      showVisible: false,
      callback: () => {},
      modelList: [],
      fieldList: [],
    };
  },
  methods: {
    editJsx() {
      let jsx = this.FormData.customFun || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.FormData.customFun = encodeURIComponent(res);
      });
    },
    async changeForm(v) {
      try {
        let { modelCode } = this.getFormListInTree.find((i) => i.key === v);
        this.fieldList = await getHmentitymodelList({
          modelKey: modelCode,
          activated: true,
        });
      } catch (error) {}
    },
    editForm({ modelList }, FormData) {
      this.modelList = modelList;
      this.FormData = cloneDeep(FormData);
      return this.showModel();
    },
    addForm({ modelList }) {
      this.modelList = modelList;
      this.FormData = {
        chidlrenKey: "", //子表字段
        keytype: "", //主表映射字段
        formkey: "", //关联表
        formcode: "", //数据字段
        routeValue: "", //参数值
        customFun: "",
      };
      return this.showModel();
    },
    showModel() {
      !!this.FormData.formkey && this.changeForm(this.FormData.formkey);
      this.showVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.clearValidate();
      });
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
    async submit() {
      try {
        await this.$refs.Form.validate();
        this.showVisible = false;
        this.callback(this.FormData);
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 220px;
}
.codebg {
  border: 1px solid #f1f1f1;
  width: 200px;
  &:hover {
    background-color: #f3f9ff;
  }
}
</style>
